<template>
  <div class="fields inline" :class="{disabled: data.readonly}">
    <label :class="{must: data.is_must}">{{data.label}}</label>
    <button class="ui secondary button"  v-for="btn in element" @click="btnAction(btn)" :class="{disabled: data.readonly, mini:btn.mini, tiny:btn.tiny, small:btn.small, medium:btn.medium, large:btn.large, big:btn.big, huge:btn.huge, massive:btn.massive}">{{btn.text}}</button>
  </div>
</template>

<script>
  import tool from 'src/util/tool';
  import util from '_util/index';
  import logic from '_logic';



  export default {
    data() {
      return {
        element:[]
      }
    },
    methods: {
      btnAction(btn){
        this.$emit("onclick", btn)
      },
    },
    watch: {
      data:{
        immediate: true,
        handler(val) {
          this.type = val.show_type;
          if(val.element){
            this.element = typeof( this.element ) != "object" ? [] : val.element.map(function(item){
              if( typeof(item) != "object" ){
                return {value:item, label: item}
              };
              return item;
            })
          }
        }
      },
    },
    props:{
      data:{
        type:Object,
        default(){
          return {}
        }
      },
    }
  };
</script>

<style lang="less" scoped>

</style>
